$(function () {
    var city = {
        c: [{left: 625, top: 300, name: "天津", rel: "总部", x: 625, y: 300},
            {left: 546, top: 270, name: "呼和浩特", x: 546, y: 270},
            {left: 680, top: 295, name: "大连", x: 680, y: 295},
            {left: 680, top: 450, name: "宁波", x: 680, y: 450},
            {left: 565, top: 570, name: "中山", x: 565, y: 570},
            {left: 745, top: 160, name: "哈尔滨", x: 745, y: 160},
            /*{top:-205,left: 265,name:"齐齐哈尔"},*/
            {left: 425, top: 456, name: "绵阳", x: 425, y: 456},
            {left: 505, top: 380, name: "西安", x: 505, y: 380},
            {left: 575, top: 570, name: "东莞", x: 575, y: 570},
            {left: 570, top: 573, name: "珠海", x: 570, y: 573},
            {left: 177, top: 187, name: "乌鲁木齐", x: 177, y: 187},

            {left: 622, top: 340, name: "济南", x: 622, y: 340},
            {left: 466, top: 305, name: "银川", x: 466, y: 305},
            {left: 606, top: 297, name: "廊坊", x: 606, y: 297},
        ]
    }
    IEVersion();
    function IEVersion() {
        var userAgent = navigator.userAgent;
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
        if (isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion == 9) {
                $('.font').css({
                    background: "rgba(112,128,144,0.8)"
                });
            }
        }
    }

    init();

    function init() {
        for (var i = 0; i < $('.one dl>a').length; i++) {
            if ($('.one dl>a').eq(i).siblings("dt").length == 0) {
                $('.one dl>a').eq(i).children('span').removeClass('right-img');
            }
        }
        var top = ($('.video').height() - $('.play').height()) / 2;
        var left = ($('.video').width() - $('.play').width()) / 2;
        var top1 = ($('.video').height() - $('.pause').height()) / 2;
        var left1 = ($('.video').width() - $('.pause').width()) / 2;

        $(".know .pause").css({top: top1 + "px", left: left1 + "px"});
        $(".know .play").css({top: top + "px", left: left + "px"});
        $('.head .font').css({height: $('.head .font').width() + "px"});
        $(".head ").css({height: $(".head ").width() / 3 * 1 + "px"});
        $('.head .font .font-bottom span').css({'font-size': $('.head .font').width() * 0.4 + "px"});
    }

    $(window).resize(function () {
        init();
        $('#swiper-container1').css({
            height: $('#swiper-container2 img').height() + "px",
        });
    });
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 876;
    canvas.height = 639;
    draw();
    mapinit(city);

    function draw() {
        for (var i = 0; i < city.c.length; i++) {
            var randmo = Math.random();
            var x = city.c[i].x;
            var y = city.c[i].y;
            var rand_x = -randmo * 40 + city.c[i].x + 10;
            var rand_y = randmo * 20 + city.c[i].y;
            var bigy = city.c[i].y + 5;
            var bottomy = rand_y + 10;
            if (city.c[i].name != "天津") {

                ctx.beginPath();
                /*起点天津*/
                ctx.moveTo(625, 300);
                ctx.quadraticCurveTo(rand_x, rand_y, x, y);  //绘制二次赛贝尔曲线
                ctx.lineTo(x + 3, bigy);       //添加尾端宽度
                ctx.quadraticCurveTo(rand_x, bottomy, 625, 300);//将图形闭合
                ctx.fillStyle = "#f40";
                ctx.strokeStyle = "#f40";
                ctx.globalAlpha = 0.9;
                ctx.fill();
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.fillStyle = "rgba(141,142,255,1)";
                ctx.arc(x, y + 2, 7, 0, 2 * Math.PI, false);   //绘制定位下的圆
                ctx.globalAlpha = 1;
                ctx.fill();

                // ctx.beginPath();
                // var grd=ctx.createRadialGradient(x,y+2,10,x,y,20);
                // ctx.arc(x,y,20,0,2*Math.PI,false);
                // grd.addColorStop(0,"#8D8EFF");
                // grd.addColorStop(0.5,"white");
                // grd.addColorStop(0.70,"#BAC3FF");
                // grd.addColorStop(0.8,"white");
                // grd.addColorStop(1,"#CAD8FF");
                // ctx.globalAlpha=0.5;
                // ctx.fillStyle=grd;
                // ctx.fill();

                ctx.closePath();

            }


        }
        /*绘制渐变扩散的圆*/
        for (var i = 0; i < city.c.length; i++) {
            var x = city.c[i].x;
            var y = city.c[i].y;
            if (city.c[i].name != "天津") {
                ctx.beginPath();
                var grd = ctx.createRadialGradient(x, y + 2, 10, x, y, 20);
                ctx.arc(x, y, 20, 0, 2 * Math.PI, false);
                grd.addColorStop(0, "#8D8EFF");
                grd.addColorStop(0.5, "white");
                grd.addColorStop(0.70, "#BAC3FF");
                grd.addColorStop(0.8, "white");
                grd.addColorStop(1, "#CAD8FF");
                ctx.globalAlpha = 0.5;
                ctx.fillStyle = grd;
                ctx.fill();

            }

        }
        ctx.beginPath();
        ctx.fillStyle = "#8D8EFF";
        ctx.arc(625, 300 + 2, 10, 0, 2 * Math.PI, false);
        ctx.globalAlpha = 1;
        ctx.fill();
        ctx.closePath();
    }

    /*  //添加新地点的工具
    canvas.addEventListener("click", function (e) {
          mx = e.pageX - $("#canvas").offset().left;
          my = parseInt(e.pageY - $("#canvas").offset().top);
          console.log("x:" + mx)
          console.log("y" + my)
      })*/
    function mapinit(city) {
        $('.map>span').css({top: city.c[1].top - 15 + "px", left: city.c[1].left + 64 + "px"});
        for (var i = 0; i < city.c.length; i++) {
            $(".local>div").eq(i).css({top: city.c[i].top + "px", left: city.c[i].left + "px"});
            $(".local>div").eq(i).children("p").text(city.c[i].name);
        }
    }

    $('#swiper-container1').css({height: $('#swiper-container2 img').height() + "px",});
    var $v = $('video');
    $('.play').click(function () {
        $('.mask').css({display: 'none'});
        $('.videos').css({display: 'block'});
        $v[0].play();
    });
    var flag2 = true;
    $('video').click(function () {
        if (flag2 == true) {
            $v[0].pause();
            $('.pause').css({display: 'block'});
            flag2 = false;
        } else {
            $v[0].play();
            $('.pause').css({display: 'none'});
            flag2 = true;
        }
    });
    $('.pause').click(function () {
        $v[0].play();
        $('.pause').css({display: 'none'});
        flag2 = true;
    });
    var flag = true;
    $('#btn-menu').click(function () {
        if (flag == true) {
            $(".one").css({transform: "translateY(0)", transition: "transform  0.3s",});
            flag = false;
        } else {
            $(".one").css({transform: "translateY(-100%)", transition: "transform  0.3s",});
            flag = true;
        }
    });
    $('.frist-page').click(function () {
        $(".one").css({transform: "translateY(-100%)", transition: "transform  0.3s",});
        flag = true;
    });
    $('.one dl').children("dt").hide();

    $('.one dl>a').click(function () {
        $(this).siblings().toggle().parent().siblings().children("dt").hide();
        $(this).children('.right-img').css({transform: "rotate(90deg)"}).parent().parent().siblings().children().children('.right-img').css({transform: "rotate(0deg)"});
        if ($(this).siblings("dt").css("display") == 'none') {
            $(this).children(".right-img").css({transform: "rotate(0deg)"});
        }
    });
});